<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Maps</title>
<style type="text/css">
<!--
body{margin:0;padding:10px;font-size:12px;}
input{ width:300px; border:1px solid #ABADB3; }
button{border:1px solid #888;border-color:#fff #888 #888 #fff;}
#map_canvas{width:500px; height:350px;border:1px #999 solid;text-align:center;margin-top:10px}
-->
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var map, geocoder, center, marker,
        mapWidth = 500, mapHeight = 350;
    function initialize() {
        geocoder = new google.maps.Geocoder();
        map = new google.maps.Map(document.getElementById("map_canvas"), {mapTypeId: google.maps.MapTypeId.ROADMAP});
        setCenter(document.getElementById('address').value);

        google.maps.event.addListener(map, 'click', function(event) {
            addMarker(event.latLng);
            geocoder.geocode({'latLng': event.latLng}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        document.getElementById('address').value = results[0].formatted_address;
                    }
                }
            });
        });
    }
    function setCenter(address,zoom) {
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.fitBounds(results[0].geometry.viewport);
                center = results[0].geometry.location; addMarker(center);
            }
        });
    }
    function addMarker(location) {
        if (marker) marker.setMap(null);
        marker = new google.maps.Marker({
            map: map, clickable:false, position: location
        });        
    }
    function insertMap() {
        var zoom    = map.getZoom(),
            mapType = map.getMapTypeId()
            markers = marker.position.toUrlValue();
        callback({
            title: document.getElementById('address').value,
            src: "http://maps.google.com/maps/api/staticmap?center=" + map.getCenter().toUrlValue() + "&zoom=" + zoom + "&size=" + mapWidth + 'x' + mapHeight + "&maptype=" + mapType + "&markers=" + markers + "&sensor=false"
        });
    }
    function _(str) {
        if (parent) {
            document.write(parent._(str));
        } else {
            document.write(str);
        }
    }
</script>
</head>

<body onload="initialize()">
    <script type="text/javascript">_('Address:')</script><input type="text" name="address" id="address" value="China" onkeypress="if (event.keyCode==13 || event.which==13) setCenter(this.value)" />
    <button type="button" onclick="setCenter(document.getElementById('address').value)"><script type="text/javascript">_('Search')</script></button>
    <button id="insert" type="button" onclick="insertMap()"><script type="text/javascript">_('Insert Map')</script></button>
    <div id="map_canvas"></div>
</body>
</html>
